<template>
  <div class="me-page">
    <header>
      <div class="head">
        <h2>{{buyerName}}</h2>
        <div class="store-type" v-show="!buyerTypeName">
          <i class="icon icon-dianpu5"></i>{{buyerTypeName}}
        </div>
        <router-link to="/seting">
          <span class="set">
            <i class="icon icon-shezhi"></i>设置
          </span>
        </router-link>
      </div>
    </header>
    <div class="opt-order border-bottom">
      <ul class="flex">
        <li>
          <router-link to="/order/list/1">
            <i class="order-icon icon1"><span class="tip" v-show="orderUnpaid>0">{{orderUnpaid}}</span></i>
            待支付
          </router-link>
        </li>
        <li>
          <router-link to="/order/list/3">
            <i class="order-icon icon2"><span class="tip" v-show="orderHarvesting>0">{{orderHarvesting}}</span></i>
            待收货
          </router-link>
        </li>
        <li>
          <router-link to="/order/list/0">
            <i class="order-icon icon3">
             <!-- <span class="tip">12</span>-->
            </i>
            全部订单
          </router-link>
        </li>
      </ul>
    </div>
    <div class="opt-group frist-head">
      <div @click="enterPandaBi" class="item flex flex-pack-justify border-bottom">
        <span class="logo panda">我的熊猫币 <i class="icon icon-wenhao red-color" @click.stop="isPandaBi=true"></i></span>
        <span><font color="#FF4A4A" style="margin-right: .2rem">{{pandaCoinNum}}</font><i class="icon icon-arrowright"></i></span>
      </div>
    </div>
    <div class="opt-group">
      <router-link to="/favorites" class="item flex flex-pack-justify border-bottom">
        <span class="logo shouchang">我的收藏</span>
        <i class="icon icon-arrowright"></i>
      </router-link>
      <router-link to="/address/list" class="item flex flex-pack-justify border-bottom">
        <span class="logo address">地址管理</span>
        <i class="icon icon-arrowright"></i>
      </router-link>
      <router-link to="/salesman" class="item flex flex-pack-justify border-bottom">
        <span class="logo yewu">我的业务员</span>
        <i class="icon icon-arrowright"></i>
      </router-link>
    </div>

    <section class="buy-wrap">
      <div class="title border-bottom"><img src="../../assets/images/purchase.png" alt="">我购买过的商品</div>
      <ul class="cate-list flex">
        <li  v-infinite-scroll="searchWareListTow"
             infinite-scroll-distance="4" v-for="item in myWareList" @click="detail(item.id)">
          <div class="cell-img">
            <img :src="item.imageThumb">
          </div>
          <div class="cell-info">
            <h3>{{item.name}}</h3>
            <div class="price">
              <span>￥{{item.priceUnit_int}}<em>.{{item.priceUnit_float}}件 </em></span>
              <i class="fr">{{item.numberPerBox}}{{item.unitName}}/件</i>
            </div>
            <div class="cell-tags">
              <span class="zy" v-show="item.supplierTypeId==1">自营</span>
              <span v-show="item.numberInventory>0">现货</span>
              <span v-show="item.pandaCoinStatus!=-1">熊猫币</span>
              <span v-show="item.openPresale>0">可预售</span>
            </div>
            <p class="company"  @click.stop="enterStore(item.supplierId)">
              <i class="icon icon-dianpu5"></i>{{item.supplierName}}
            </p>
          </div>
        </li>
      </ul>
    </section>
    <div class="flex flex-pack-center loading" v-show="loading">
      <span>正在加载</span>
      <mt-spinner :size="60" color="rgb(100, 100, 100)" type="fading-circle"></mt-spinner>
    </div>
    <section class="last" v-show="isLast && myWareList.length>0">
      <div class="tit">
        老板，已经到底了
      </div>
    </section>

    <nodata textContent="您还没有买过商品哦" v-show="myWareList.length==0"></nodata>

    <div class="foot-blank"></div>
    <footBar curPage="me"></footBar>
    <pandaBi v-show="isPandaBi"></pandaBi>
  </div>
</template>
<script>
    export default {
        props: {},
        data() {
            return {
                isPandaBi:false,
                buyerName: Cookie.get('buyerName'),//采购商名称
                siteName: Cookie.get('name'),//站点名称
                buyerTypeName: Cookie.get('buyerTypeName'),//采购商类型
                orderUnpaid: 0,//待支付数量
                orderHarvesting: 0,//待发货数量
                loading: false,
                isLast: false, //是否为最后一条数据
                myWareList: [], //购买商品历史列表
                pandaCoinNum: Cookie.get('pandaCoinNum'),//熊猫币数量
                searchParams: {
                    no: 1,
                    size: 4
                }
            };
        },
        methods: {
            /**
             * 获取订单数量
             * */
            getOrderNum(){
                getOrderNum().then(data=>{
                    if(data.returnCode == '000000'){
                        this.orderUnpaid = data.result.orderUnpaid;//未支付
                        this.orderHarvesting = data.result.orderHarvesting;//待发货
                    }
                })
            },
            searchWareListTow(callback){
                if (this.loading || this.isLast) {
                    return;
                }
                this.loading = true;
                searchWareListTow(this.searchParams).then(data=>{
                    this.loading = false;
                    if (data.returnCode == '000000') {
                        if (this.searchParams.no > 1) {
                            this.myWareList = this.myWareList.concat(data.result);
                        } else {
                            this.myWareList = data.result;
                        }
                      //  console.log('...'+data.result.length+'...'+this.searchParams.size);
                        //最后一页
                        if (data.result.length < this.searchParams.size) {
                            this.isLast = true;
                        }
                        callback && callback();
                        this.searchParams.no++;
                    }
                })
            },
            //查看商品详情
            detail(goodsId){
                this.$router.push({name: 'goodsDetail', params: {wareId: goodsId}});
            },
            // 进入商店
            enterStore: function(supplierId){
                this.$router.push({name: 'store', params: {storeId: supplierId}});
            },
            enterPandaBi(){
                this.$router.push({name: 'pandaBiList', params: {}});
            }
        },
        filters: {},
        created() {
            this.getOrderNum();
            this.searchWareListTow();
        },
        mounted() {

    },
    components: {
    }
  };
</script>
<style lang="less" scoped>
  @import "./me.less";
  .buy-wrap{
    margin-top: .16rem;
    background: #fff;
    .title{
      height: .81rem;
      line-height: .81rem;
      text-align: center;
      font-size: .24rem;
      color: #999999;
      img{
        position: relative;
        display: inline-block;
        width: .22rem;
        margin-right: .1rem;
        top: .01rem;
      }
    }
  }
</style>
